<template>
  <div style="height: 100%; overflow: hidden">
    <van-form @submit="onSubmit">
      <!-- 基本信息 -->
      <FormTitle title="基本信息"></FormTitle>
      <!-- 只允许查看 -->
      <van-cell-group class="basic-info-readonly" inset v-if="isShowUD">
        <van-field
          v-model="formData.house"
          readonly
          name="选择房屋"
          label="选择房屋"
          placeholder="请输入选择房屋"
          :rules="[{ required: true, message: '请选择房屋' }]"
        />
        <van-field
          v-model="formData.name"
          readonly
          name="姓名"
          label="姓名"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.IdCard"
          readonly
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.phone"
          readonly
          name="联系方式"
          label="联系方式"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
      </van-cell-group>

      <!-- 允许修改 -->
      <van-cell-group inset v-else>
        <van-field
          style="background-color: #f2f2f2"
          v-model="formData.house"
          name="选择房屋"
          label="选择房屋"
          readonly
          placeholder="请输入选择房屋"
          :rules="[{ required: true, message: '请选择房屋' }]"
        />
        <van-field
          v-model="formData.name"
          name="姓名"
          label="姓名"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.IdCard"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.phone"
          name="联系方式"
          label="联系方式"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
      </van-cell-group>

      <!-- 备注 -->
      <van-cell-group inset class="mt-10 basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="formData.remake"
          label-align="top"
          readonly
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>

      <van-cell-group inset class="mt-10" v-else>
        <van-field
          v-model="formData.remake"
          label-align="top"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <div class="dvc"></div>
      <div class="btn_box">
        <div class="Btns" v-if="isShowUD">
          <van-button
            class="del"
            round
            block
            type="primary"
            native-type="submit"
            @click="delBaseInfo"
          >
            删除
          </van-button>
          <van-button
            class="sub"
            round
            block
            type="primary"
            native-type="submit"
            @click="updateBaseInfo"
          >
            修改
          </van-button>
        </div>

        <div class="Btns_2" v-else>
          <van-button
            class="sub"
            round
            block
            type="primary"
            native-type="submit"
            @click="updateSubmit"
          >
            提交
          </van-button>
        </div>
      </div>
    </van-form>

    <!-- <van-popup v-model:show="showPickerForTime" position="bottom">
          <van-date-picker @confirm="onConfirmForTime" @cancel="showPickerForTime = false" />
        </van-popup> -->
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
// import { getTenantInfo } from "@/api/tenant/index.js";
import api from "@/api/rental";
import { showConfirmDialog, showToast } from "vant";
import FormTitle from "@/components/formTitle/index.vue";
import { useUserStore } from "@/stores/user.js";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 显示房屋
const showHouse = ref(false);
const houseList = ref([]);

const isShowUD = ref(true);
// 表单数据
const infoForm = ref({
  result: "",
  updata1: [],
})

const formData = reactive({
  house: "",
  name: "",
  IdCard: "",
  phone: "",
  remake: "",
  rentId: "",
  tenantId: "",
});
// 选择房屋确认事件
const onConfirmshowSqzj = (value) => {
  // console.log('value',value.selectedOptions[0].text);
  formData.house = value.selectedOptions[0].text;
  formData.rentId = value.selectedOptions[0].value;
  showHouse.value = false;
}
const updateBaseInfo = () => {
  isShowUD.value = false;
}
// 提交
const onSubmit = async () => {};

// 弹框异步操作
const beforeClose = (action) =>
  new Promise(async (resolve) => {
    if (action === "confirm") {
      let res = await api.delTenant(formData.tenantId);
      console.log("---del---", res);
      if (res.data.code == 200 && res.data.msg == "操作成功") {
        showToast("删除成功");
        setTimeout(() => {
          router.push({
            path: "/rental",
          });
        }, 1200);
      }
    }
    resolve(action);
  })
// 删除按钮提交事件
const delBaseInfo = () => {
  //删除操作
  showConfirmDialog({
    title: "删除",
    message: "确认删除该条数据吗？",
    beforeClose,
  });
}
// 修改提交按钮
const updateSubmit = async () => {
  let params = {
    tenantId: formData.tenantId,
    idCard: formData.IdCard,
    name: formData.name,
    sex: "",
    telphone: formData.phone,
    inTime: "",
    outTime: "",
    remake: formData.remake,
  };
  let res = await api.updateTenant(params);
  if (res.data.code == 200 && res.data.msg == "操作成功") {
    showToast("修改成功");
    setTimeout(() => {
      router.push({
        path: "/rental",
      });
    }, 1200);
  }
}
onMounted(async () => {
  let { tenantId } = route.query;
  let res = await api.getTenantDetail(tenantId);
  // console.log("--res--", res);
  formData.house = res.data.data.title;
  formData.name = res.data.data.name;
  formData.IdCard = res.data.data.idCard;
  formData.phone = res.data.data.telphone;
  formData.remake = res.data.data.remake;
  formData.rentId = res.data.data.rentId;
  formData.tenantId = tenantId;
});
</script>

<style lang="scss" scoped>
.dvc {
  height: 70px;
}
.btn_box {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  margin-top: 20px;
  padding: 15px 16px;
  display: flex;
  border: none;
  .Btns {
    width: 100%;
    display: flex;
    .del {
      flex: 3;
      background: linear-gradient(90deg, #f2724d 0%, #ff9576 99%);
    }
    .sub {
      flex: 5;
      margin-left: 20px;
    }
  }
  .Btns_2 {
    width: 100%;
    .sub {
      width: 100%;
    }
  }
}
::v-deep .basic-info-readonly {
  .van-cell {
    background-color: #f2f2f2;
  }
}
</style>
